<script setup lang="ts">
import TTCanvas from "./components/TTCanvas.vue";
import OrbitControls from "./components/controls/OrbitControls.vue";
import { Vector3 } from "three";

const onPointerEnter = e => {
	console.log(e);
	e.object.material.color.set(1.0, 0.0, 1.0);
};
const onPointerLeave = e => {
	console.log(e);
};
const positions = [new Vector3(0, 0, 0), new Vector3(1, 0, 1)];

const rotations: Vector3[] = [];
const scales: Vector3[] = [];
</script>

<template>
	<!-- preset="realistic" 渲染器默认设置  -->
	<TTCanvas preset="realistic">
		<TTPerspectiveCamera></TTPerspectiveCamera>
		<TTMesh
			createInstancedMesh
			:positions="positions"
			:rotations="rotations"
			:scales="scales"
			:onpointerenter="onPointerEnter"
			:onpointerleave="onPointerLeave"
		>
			<TTBoxGeometry></TTBoxGeometry>
			<TTMeshBasicMaterial></TTMeshBasicMaterial>
		</TTMesh>
		<OrbitControls></OrbitControls>
	</TTCanvas>
</template>

<style scoped></style>
